<template>
	<view>
		<view class="nav-bar">
			<view class="card">
				<view class="title">
					数据概览
				</view>
				<view class="list justify-between items-center">
					<view class="item-btn items-center flex-col">
						<view class="top-btn">
							{{topInfo.d4 || 0}}
						</view>
						<view class="text">
							总金额
						</view>
					</view>
					<view class="item-btn items-center flex-col">
						<view class="top-btn">
							{{topInfo.d20 || 0}}
						</view>
						<view class="text">
							总收益
						</view>
					</view>
					<view class="item-btn items-center flex-col">
						<view class="top-btn">
							{{topInfo.d5 || 0}}
						</view>
						<view class="text">
							次数
						</view>
					</view>
					<view class="item-btn items-center flex-col">
						<view class="top-btn">
							{{topInfo.d1 || 0}}
						</view>
						<view class="text">
							电量
						</view>
					</view>
				</view>

			</view>

		</view>
		<view class="content">
			<view class="background-fff">
				<u-tabs :list="tabsList" @change="click" active-color="#2F9E25" bar-width="100" bar-height="2"
					bg-color="transparent" :current="current"></u-tabs>
				<view class="top-screen">
					<view class="time">
						<view class="top-time justify-between items-center" @click="show=true,timeVale2='',pageNo=1">
							<view class="left items-center">
								<view class="text">
									开始日期：
								</view>
								<input disabled type="text" v-model="timeVale" placeholder="年 月 日">
							</view>
							<view class="right">
								<u-icon name="arrow-down" size="18"></u-icon>
							</view>
						</view>
						<view class="top-time justify-between items-center" @click="handleEnd">
							<view class="left items-center">
								<view class="text">
									结束日期：
								</view>
								<input disabled type="text" v-model="timeVale2" placeholder="年 月 日">
							</view>
							<view class="right">
								<u-icon name="arrow-down" size="18"></u-icon>
							</view>
						</view>
					</view>
					<view class="top-address top-time justify-between items-center" @click="show3=true">
						<view class="left">
							{{address}}
						</view>
						<view class="right">
							<u-icon name="arrow-down" size="18"></u-icon>
						</view>
					</view>
				</view>
				<view class="btn btn-1" @click="resetting">
					重置
				</view>
				<view class="btn" @click="query">
					查询
				</view>
				
				<view class="charts-box">
					<qiun-data-charts :canvas2d="true" :canvasId="canvasId" type="column" :opts="opts" :chartData="chartData" :ontouch="true" />
				</view>
			</view>
			<view class="card" style="margin-top: 30rpx;">
				<view class="title">
					数据概览
				</view>
				<view class="list">
					<view class="item card" v-for="item in dataList" :key="item.id">
						<view class="title">
							{{item.date}}
						</view>
						<view class="info">
							<view class="profit info-text justify-between items-center">
								<view>总金额：{{item.payPrice}}元</view>
								<view style="margin-left: 20rpx;">
									总收益：{{item.earnings}}元
								</view>
							</view>
							<view class="time info-text justify-between items-center">
								<view>电量：{{item.electric}}度</view>
								<view style="margin-left: 20rpx;">
									次数：{{item.times}}次
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-empty margin-top="150" v-if="dataList.length < 1" text="数据为空" mode="list"></u-empty>
			</view>
		</view>
		<u-picker v-model="show" @confirm="handleTime"></u-picker>
		<u-picker v-model="show2" @confirm="handleTime2"></u-picker>
		<u-picker v-model="show3" mode="selector" @confirm="handleTime3" :range="choiceList"
			range-key="name"></u-picker>
		<mix-loading v-if="isLoading"></mix-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				show2: false,
				show3: false,
				timeVale: '',
				timeVale2: '',
				minData: 0,
				address: '请选择',
				pageNo: 1,
				last: 1,
				dataList: [],
				info: {},
				choiceList: [],
				stationId: '',
				tabsList: [{
					name: '营收日报'
				}, {
					name: '营收月报'
				}],
				current: 0,
				chartData: {},
				topInfo:{},
				opts: {
					color: ["#5087EC", "#68BBC4"],
					padding: [15, 15, 0, 5],
					enableScroll: true,
					canvas2d:true,
					background:"#F5F5F5",
					legend: {},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 3
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				}
			};
			canvasId:''
		},
		onLoad() {
			this.handleRandom()
			Promise.all([
				this.listAgencyFn(),
				this.listAgencyTwoFn()
			]).then(([form, data]) => {
				this.choiceList = this.choiceList.concat(form.data.list, data.data.list)
				console.log(this.choiceList, '成功');
			}).catch(([e, r]) => {
				console.log(e, r, '失败');
			})
		},
		onPullDownRefresh() {
			this.infoFn()
		},
		onReady() {
			this.infoFn()
		},
		methods: {
			handleRandom(){
				let result = '';
				const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
				for (let i = 0; i < characters.length; i++) {
				  result += characters.charAt(Math.floor(Math.random() * characters.length));
				}
				this.canvasId = result
			},
			click(e) {
				console.log(e);
				this.current = e
				this.infoFn()
			},
			handleTime(e) {
				console.log(e);
				this.minData = e.timestamp
				this.timeVale = e.year + '-' + e.month + '-' + e.day
			},
			handleTime2(e) {
				console.log(e);
				if (this.minData > e.timestamp) {
					console.log(123);
					return this.$util.msg('结束时间不能小于开始时间')
				}
				this.timeVale2 = e.year + '-' + e.month + '-' + e.day
				// this.pageNo = 1
				// this.infoFn()
			},
			handleTime3(e) {
				console.log(e);
				this.address = this.choiceList[e[0]].name
				this.stationId = this.choiceList[e[0]].id
				// this.infoFn()
			},
			query(){
				this.pageNo = 1
				this.infoFn()
			},
			resetting(){
				this.address = '请选择'
				this.stationId = ''
				this.timeVale = ''
				this.timeVale2 = ''
			},
			handleEnd() {
				if (!this.minData) return this.$util.msg('请先选择开始时间')
				this.pageNo = 1
				this.show2 = true
			},
			listAgencyFn() {
				let data = {
					uid: uni.getStorageSync('uid'),
					pageNo: 1,
					pageSize: 100000,
				}
				return this.$request('user/zz-station-list', data)
			},
			listAgencyTwoFn() {
				let data = {
					uid: uni.getStorageSync('uid'),
					pageNo: 1,
					pageSize: 100000,
				}
				return this.$request('user/zz-station-list-two', data)
			},
			getServerData(list) {
				let time = list.map(el=>el.time)
				let total = list.map(el=>el.total)
				let earnings = list.map(el=>el.earnings)
				let res = {
					categories: time,
					series: [{
							name: "总金额",
							data: total
						},
						{
							name: "收益",
							data: earnings
						}
					]
				};
				this.chartData = JSON.parse(JSON.stringify(res));
			},
			async infoFn() {
				var beginCreateDate = this.timeVale ? this.timeVale + ' ' + '00:00:01' : ''
				var endCreateDate = this.timeVale2 ? this.timeVale2 + ' ' + '23:59:59' : ''
				let data = {
					uid: uni.getStorageSync('uid'),
					stationId: this.stationId,
					beginCreateDate,
					endCreateDate
				}
				let res = await this.$request('user/dp-day', data, {
					showLoading: true
				})
				uni.stopPullDownRefresh()
				if (res.result == '0') {
					this.topInfo = res.data
					this.current == 0 ? this.getServerData(res.data1) : this.getServerData(res.data11)
					this.current == 0 ? this.dataList = res.data5 : this.dataList = res.data55
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.card {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 30rpx;
	}

	.nav-bar {
		padding: 40rpx 30rpx;

		.title {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #222222;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #E7E7E7;
			margin-bottom: 20rpx;
		}

		.item-btn {
			.top-btn {
				max-width: 140rpx;
				border-radius: 33rpx;
				padding: 10rpx;
			}

			.text {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #868889;
				line-height: 50rpx;
			}
		}
	}

	.content {
		padding: 30rpx;
		padding-top: 0;

		.top-screen {
			margin-top: 30rpx;
		}

		.top-time {
			background: #FAFAFA;
			box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(211, 211, 211, 0.4);
			border-radius: 14rpx;
			padding: 20rpx 40rpx;
			margin-bottom: 10rpx;

			.left {
				font-size: 22rpx;
				font-weight: 500;
				color: #7C818B;
				line-height: 21rpx;
				font-size: 22rpx;
				margin-right: 20rpx;
			}
		}

		.list {
			margin-top: 20rpx;
			
			.item {
				margin-bottom: 30rpx;
				padding: 20rpx;
				box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(211,211,211,0.4);
				.title {
					font-size: 26rpx;
					font-weight: 500;
					color: #999999;
					line-height: 50rpx;
					border-bottom: 1rpx solid #E7E7E7;
					padding-bottom: 20rpx;
					margin-bottom: 20rpx;
				}

				.name {
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
					line-height: 76rpx;
				}

				.info-text {
					font-size: 24rpx;
					font-weight: 500;
					color: #666666;
					line-height: 47rpx;
				}
			}
		}
	}

	.btn {
		width: 640rpx;
		height: 100rpx;
		background: $uni-color-bg;
		border-radius: 50rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 100rpx;
		text-align: center;
		margin: 40rpx auto;
	}
	.btn-1{
		border: 1rpx solid $uni-color-bg;
		background-color: #fff;
		color: $uni-color-bg;
	}

	.charts-box {
		width: 100%;
		height: 300px;
	}
	.background-fff{
		background-color: #fff;
		border-radius: 20rpx;
		padding: 10rpx;
	}
</style>